<template>
  <div class="files"  :style="{'height':data.height*40 + (data.height-1)*8 + 'px'}">
    <div class="name">文件选项 :</div>
    <el-upload class="upload-box" action="https://jsonplaceholder.typicode.com/posts/" :on-success="handlePreview" :on-remove="handleRemove" :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      fileList:[{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          status: 'finished'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          status: 'finished'
        }] 
    }
  },
  computed: {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
    },
    handlePreview(response, file, fileList) {
      this.fileList = fileList;
      console.log(response, file, fileList);
    }
    ,test(){
      alert(66666)
    }
  },
  mounted() {
    console.log(this.data)
  }
}

</script>
<style lang="less">
.files {
  width: 100%;
  height: 100%;
  display: flex;
  border: 1px dashed #000;
  box-sizing: border-box;
  border-radius: 6px;
  height: 88px;
  position: relative;
  .name {
    padding: 0 10px;
    margin-top: 16px;
    white-space: nowrap;
  }
  .upload-box{
    flex:1;
    width:0;
    height: 100%;
    border-left: 1px dashed #000;
      .el-button{
        position: absolute;
        top:40px;
        left:10px;
      }
      .el-upload-list{
      width:100%;
      padding-top: 0;
      margin-top: -25px;
    }
  }
  
}

</style>
